<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时2</title>
    <style>
        h1 {
            color: red;
        }

        [class^='box'] {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: black;
            color: #fff;
            line-height: 100px;
            text-align: center;
            font-size: 53px;
            /* font-weight: bold; */
        }
    </style>
</head>

<body>
    <h1>2020双十一倒计时：</h1>
    <div class="box1">10</div>
    <div class="box2">20</div>
    <div class="box3">30</div>
    <script>
        var box = document.querySelectorAll('[class^=box]');
        function countDown(y, mon, d, h = 0, min = 0, s = 0) {
            var now = new Date();
            var targetDay = new Date(y, mon - 1, d, h, min, s);
            // console.log(targetDay);
            var syTime = Math.floor((targetDay - now) / 1000);
            // console.log(syTime);
            // var years = y - now.getFullYear();
            // var months = mon - 1 - now.getMonth();
            // var days = d - now.getDate();
            var hours = Math.floor(syTime / (60 * 60));
            var minutes = Math.floor(syTime % (60 * 60) / 60);
            var seconds = syTime % (60 * 60) % 60;
            // console.log(years);
            // console.log(months);
            // console.log(days);
            // console.log(hours);
            // console.log(minutes);
            // console.log(seconds);
            if (hours < 10) {
                hours = "0" + hours;
            }
            if (minutes < 10) {
                minutes = "0" + minutes;
            }
            if (seconds < 10) {
                seconds = "0" + seconds;
            }
            box[0].innerHTML = hours
            box[1].innerHTML = minutes;
            box[2].innerHTML = seconds;

        }
        setInterval(() => {
            countDown(2020, 11, 11);
        }, 1000)
    </script>
</body>

</html>